<template>
  <van-cell-group inset>
    <van-field
      v-model="code"
      center
      clearable
      label="短信验证码"
      placeholder="请输入短信验证码"
    >
      <template #button>
        <van-button
          size="small"
          type="primary"
          @click="sendCheckCode"
          :disabled="checkCode == 10 ? false : true"
        >
          {{ msg }}</van-button
        >
      </template>
    </van-field>
  </van-cell-group>

  <!-- @click="nextClick" -->
  <!-- :disabled="flag == 'ok' ? false : true" -->
  <van-button type="danger" @click="nextStep">下一步</van-button>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { getCheckCode } from '@/apis/user'
import { useUserStore } from '@/store/userStore'
import router from '@/router'

const checkCode = ref(10) // 到计时的值
const code = ref(1) // 显示验证码的值

let timeId = null

const user = useUserStore()

//1  发送验证码 按钮 ( 倒计时 没有的结束的时候显示 还剩多少秒 如果结束了立马显示 发送验证码)
// 1.1   对验证码 倒计时需要定时器 进行 减减  减为0 那么清空定时器 按钮恢复初始状态
//2  成功下一步    失败  给出提示  成功 那么就跳转下一步

const sendCheckCode = async () => {
  sendTime()

  let res = await getCheckCode({ tel: user.tel })

  console.log(res)

  if (res.code == '200') {
    code.value = res.data // 对验证进行赋值
  }
}

//  到计时的 的函数
const sendTime = () => {
  timeId = setInterval(() => {
    checkCode.value--
    if (checkCode.value == 0) {
      clearInterval(timeId)
      checkCode.value = 10
    }
  }, 1000)
}

// 对 按钮的 到计时 跟  发送验证码 文字切换
const msg = computed(() => {
  if (checkCode.value < 10) {
    return checkCode.value + '秒'
  } else {
    return '发送验证码'
  }
})

// 下一步 跳转
const nextStep = () => {
  setTimeout(() => {
    router.push('/register/password')
  }, 1000)
}
</script>
<style scoped lang="scss">
.van-button {
  margin-top: 10px;
  width: 100%;
}
</style>
